.header {
  background: url("../img/page4/title.png") center no-repeat;
}

.main-content {
  padding-top: 5px !important;

  .change-list {
    position: absolute;
    right: 20px;
    top: 3px;

    >ul {
      >li {
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        width: 152px;
        height: 33px;
        line-height: 33px;
        text-align: center;
        background: url("../img/page5/unselected.png");

        &:nth-child(1) {
          i {
            display: inline-block;
            vertical-align: middle;
            width: 64px;
            height: 20px;
            background: url("../img/page4/1-un.png") center no-repeat;
          }
        }

        &:nth-child(2) {
          i {
            display: inline-block;
            vertical-align: middle;
            width: 104px;
            height: 20px;
            background: url("../img/page4/2-un.png") center no-repeat;
          }
        }

        &:nth-child(3) {
          i {
            display: inline-block;
            vertical-align: middle;
            width: 104px;
            height: 20px;
            background: url("../img/page4/3-un.png") center no-repeat;
          }
        }

        &.active,
        &:hover {
          width: 152px;
          height: 33px;
          background: url("../img/page5/selected.png");

          &:nth-child(1) {
            i {
              width: 81px;
              height: 24px;
              background: url("../img/page4/1-se.png") center no-repeat;
            }
          }

          &:nth-child(2) {
            i {
              width: 133px;
              height: 24px;
              background: url("../img/page4/2-se.png") center no-repeat;
            }
          }

          &:nth-child(3) {
            i {
              width: 133px;
              height: 24px;
              background: url("../img/page4/3-se.png") center no-repeat;
            }
          }
        }
      }
    }
  }

  .top-container {
    height: 586px;
  }

  .bottom-container {
    height: 373px;
  }

  .table-container {
    &.top-left {
      float: left;
      overflow: hidden;

      .vticker-container {
        width: 500px;
        height: 531px;
        background: url("../img/page4/top-left.png");
      }
    }

    &.top-right {
      position: relative;
      width: 1358px;
      height: 580px;
      float: right;
      overflow: hidden;

      .vticker-container {
        position: absolute;
        right: -1378px;
        width: 1358px;
        height: 531px;
        background: url("../img/page4/top-right.png");
      }
    }

    &.bottom-left {
      float: left;
      overflow: hidden;

      .vticker-container {
        width: 419px;
        height: 330px;
        background: url("../img/page4/bottom-left.png");
      }
    }

    &.bottom-right {
      float: right;
      width: 1440px;
      height: 100%;
      overflow: hidden;

      .carousel .caro-main ul li .title {
        margin: 0 0 10px 0 !important;
      }

      .vticker-container {
        width: 1440px;
        height: 330px;
        background: url("../img/page4/bottom-right.png");
      }
    }

    .title {
      width: 185px;
      height: 33px;
      line-height: 33px;
      font-size: 22px;
      margin-bottom: 10px;
      background: url("../img/page7/l-title.png");

      &.long-title {
        width: 350px;
        background: url("../img/page7/l-title.png") right center no-repeat;
      }
    }

    .vticker-container {
      overflow: hidden;
      padding: 16px;

      .vticker-header {
        width: 100%;
        height: 55px;
        line-height: 55px;
        color: #00fcff;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        background: #0428b1;

        ul {
          width: 100%;
          display: flex;

          li {
            flex: 1;
            border: none !important;
          }
        }
      }

      .vticker-body {

        &#vticker1,
        &#vticker2,
        &#vticker3,
        &#vticker4 {
          height: 447px;
        }

        &#vticker5 {
          height: 235px;
        }

        ul {
          >li {
            position: relative;
            height: 56px;
            line-height: 56px;
            display: flex;

            &.even {
              background: #0428b1;
            }

            div {
              position: relative;
              flex: 1;
              text-align: center;
              height: 100%;
              font-size: 19px;
              border-right: none;

              &.time {
                line-height: 28px;
                word-break: break-word;
              }

              &.status {
                color: #36d463;
              }
            }
          }
        }
      }
    }
  }
}